import * as echarts from 'echarts'
import './markdownItEcharts.css'
import { BaseRenderer } from './BaseRenderer'

/**
 * ECharts渲染器类（继承 BaseRenderer）
 */
class EChartsRenderer extends BaseRenderer {
  constructor() {
    super()
    this.dataset = {} // 实例级别的dataset对象
    this.theme = 'light' // 默认主题
  }

  // 设置实例级别的dataset对象
  setDataset(dataset) {
    this.dataset = dataset
  }

  // 设置主题
  setTheme(theme) {
    this.theme = theme === 'dark' ? 'dark' : null // ECharts 的 light 主题用 null
  }

  /**
   * 解析配置代码（提取公共方法）
   */
  _parseOptions(decodedCode) {
    const dataset = this.dataset || {};
    const getOptions = new Function('dataset', `return ${decodedCode}`);
    return getOptions(dataset);
  }

  /**
   * 创建 ResizeObserver（统一创建逻辑）
   */
  _createResizeObserver(chart) {
    let resizeTimer = null;
    return new ResizeObserver(() => {
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        requestAnimationFrame(() => {
          try {
            chart.resize();
          } catch (resizeError) {
            console.error('ECharts resize 错误:', resizeError);
          }
        });
      }, 200);
    });
  }

  /**
   * 渲染单个图表容器（核心逻辑）
   */
  _renderChart(container) {
    // 检查容器尺寸
    const rect = container.getBoundingClientRect();
    if (rect.width === 0 || rect.height === 0) {
      console.warn('ECharts 容器尺寸为 0，延迟渲染');
      setTimeout(() => this.processEChartsElements(), 100);
      return;
    }

    // 解析配置
    const optionsCode = container.dataset.options;
    const decodedCode = optionsCode.replace(/&quot;/g, '"');
    const options = this._parseOptions(decodedCode);

    let chart = container._echartsInstance;

    if (chart) {
      // 检查主题是否变化
      if (container._currentTheme !== this.theme) {
        // 主题变化：销毁旧实例，重新创建
        chart.dispose();
        container._resizeObserver?.disconnect();
        chart = null;
        container._echartsInstance = null;
      } else {
        // 实例已存在且主题未变：检查是否需要更新
        if (container._lastOptionsCode === decodedCode) {
          chart.resize(); // 配置未变，只调整尺寸
          return;
        }

        // 配置变化：智能更新
        const isForceGraph = options.series?.some(s => s.type === 'graph' && s.layout === 'force');
        chart.setOption(options, !isForceGraph);
        chart.resize();
        container._lastOptionsCode = decodedCode;
        return;
      }
    }
    
    if (!chart) {
      // 创建新实例，使用当前主题
      chart = echarts.init(container, this.theme);
      chart.setOption(options);

      const resizeObserver = this._createResizeObserver(chart);
      resizeObserver.observe(container);

      container._echartsInstance = chart;
      container._resizeObserver = resizeObserver;
      container._lastOptionsCode = decodedCode;
      container._currentTheme = this.theme; // 记录当前主题
    }

    container.setAttribute('data-processed', 'true');
  }

  /**
   * 处理ECharts元素
   */
  processEChartsElements() {
    requestAnimationFrame(() => {
      document.querySelectorAll('.echarts-container').forEach(container => {
        try {
          this._renderChart(container);
        } catch (error) {
          console.error('ECharts渲染错误:', error);
          container.innerHTML = `<pre class="error">ECharts渲染错误: ${error.message}</pre>`;
          this.addError({
            type: 'ECharts',
            message: error.message,
            code: container.dataset.options
          });
        }
      });
    });
  }

  /**
   * 观察DOM变化（使用基类方法）
   */
  observeDOM(previewContainerSelector) {
    super.observeDOM(
      previewContainerSelector,
      'echarts-container',
      () => this.processEChartsElements(),
      100
    )

    // 监听数据集筛选变化事件
    document.addEventListener('datasetFilterChanged', () => {
      this.updateChartsWithFilteredData()
    })
  }

  /**
   * 更新图表使用筛选后的数据（复用核心渲染逻辑）
   */
  updateChartsWithFilteredData() {
    requestAnimationFrame(() => {
      document.querySelectorAll('.echarts-container').forEach(container => {
        try {
          // 强制更新：清除缓存的配置
          container._lastOptionsCode = null;
          this._renderChart(container);
        } catch (error) {
          console.error('ECharts更新错误:', error);
          container.innerHTML = `<pre class="error">ECharts更新错误: ${error.message}</pre>`;
          this.addError({
            type: 'ECharts',
            message: error.message,
            code: container.dataset.options
          });
        }
      });
    });
  }

  /**
   * 清理资源
   */
  cleanup() {
    // 清理 ECharts 特定资源
    const containers = document.querySelectorAll('.echarts-container')
    containers.forEach(container => {
      if (container._echartsInstance) {
        container._echartsInstance.dispose()
        container._echartsInstance = null
      }
      if (container._resizeObserver) {
        container._resizeObserver.disconnect()
        container._resizeObserver = null
      }
    })
    
    // 调用基类清理
    super.cleanup()
  }
}

/**
 * markdown-it echarts插件主函数
 */
export default function markdownItEcharts(md) {
  // 保存默认的fence渲染器
  const defaultFenceRender = md.renderer.rules.fence || 
    function(tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };

  // 重写fence渲染规则
  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
    const token = tokens[idx];
    const code = token.content.trim();
    const info = token.info.trim();

    // 处理echarts代码块
    if (info === 'echarts') {
      try {
        // 创建echarts容器HTML
        return `
          <div class="echarts-container" data-options="${code.replace(/"/g, '&quot;')}"></div>
        `;
      } catch (e) {
        return `<pre class="error">ECharts配置处理错误: ${e.message}</pre>`;
      }
    }

    // 对于其他类型的代码块，使用默认渲染器
    return defaultFenceRender(tokens, idx, options, env, self);
  };
}

// 导出渲染器类供外部使用
export { EChartsRenderer };